<template>

  <el-skeleton style="width: 100%"  :loading="loading" animated>
    <template #template>
      <div style="margin:8vh 0px 3vh 0px;">
        <el-skeleton-item
          variant="image"
          style="margin:auto;border-radius:50%;width: 60px; height: 60px;"
        />
      </div>
      <div style="text-align: center;">
        <el-skeleton-item variant="h1" style="width: 50%;" />
      </div>
      <div style="text-align: center;">
        <el-skeleton-item variant="h3" style="width: 40%;" />
      </div>

      <div style="margin-top:4vh;text-align: center;">
        <el-skeleton-item variant="text" style="margin-right:1vw;border-radius:50%;width:25px;height:26px" />
        <el-skeleton-item variant="text" style="margin-right:1vw;border-radius:50%;width:25px;height:26px" />
        <el-skeleton-item variant="text" style="margin-right:1vw;border-radius:50%;width:25px;height:26px" />
        <el-skeleton-item variant="text" style="margin-right:1vw;border-radius:50%;width:25px;height:26px" />
        <el-skeleton-item variant="text" style="margin-right:1vw;border-radius:50%;width:25px;height:26px" />
      </div>

      <div style="margin-top:4vh;text-align: center;">
          <el-skeleton-item variant="text" style="margin-top:1vh;width:80%" />
          <el-skeleton-item variant="text" style="margin-top:1vh;width:80%" />
          <el-skeleton-item variant="text" style="margin-top:1vh;width:80%" />
          <el-skeleton-item variant="text" style="margin-top:1vh;width:80%" />
      </div>

      <div style="margin:40px 10%;">
        <div style="margin:1vh 0px;display:flex;">
          <!-- 左侧 -->
            <el-skeleton-item variant="image"  style="border-radius:50%;width:40px;height:45px;"/>
          <!-- 右侧 -->
          <div style="width:70%">
            <el-skeleton-item
              variant="text"
              style="width:40%"
            />
            <el-skeleton-item
              variant="text"
              style="width:100%"
            />
          </div>
        </div>
        <div style="margin:1vh 0px;display:flex;">
          <!-- 左侧 -->
            <el-skeleton-item variant="image"  style="border-radius:50%;width:40px;height:45px;"/>
          <!-- 右侧 -->
          <div style="width:70%">
            <el-skeleton-item
              variant="text"
              style="width:40%"
            />
            <el-skeleton-item
              variant="text"
              style="width:100%"
            />
          </div>
        </div>
        <div style="margin:1vh 0px;display:flex;">
          <!-- 左侧 -->
            <el-skeleton-item variant="image"  style="border-radius:50%;width:40px;height:45px;"/>
          <!-- 右侧 -->
          <div style="width:70%">
            <el-skeleton-item
              variant="text"
              style="width:40%"
            />
            <el-skeleton-item
              variant="text"
              style="width:100%"
            />
          </div>
        </div>
      </div>

    </template>
    <template #default>
      <el-row
        class="main"
        :style="{
          backgroundColor: changeBGColor === 'night' ? '' : 'rgb(21 21 24 / 79%)',
        }"
      >
        <el-col class="top-box">
          <el-row class="top" v-if="userinfo">
            <el-row class="img-box">
              <el-col>
                <img src="../assets/profile3.jpg" alt="" />
              </el-col>
            </el-row>
            <el-row class="title-text"
              ><el-col>{{ userinfo.chinesename }}</el-col></el-row
            >
            <el-row class="title-text">
              <el-col>{{ userinfo.englishname }}</el-col>
            </el-row>
            <el-row class="icon-box">
              <div class="icon-box-item">
                <el-button
                  class="tooltip"
                  @click.native="$router.push('/')"
                  size="mini"
                  icon="iconfont icon-fl-jia"
                  circle
                />
                <div class="icon-text">个人主页</div>
              </div>

              <div class="icon-box-item">
                <el-button
                  @click.native="$router.push('/message')"
                  size="mini"
                  icon=" iconfont icon-comments"
                  circle
                />
                <div  class="icon-text">留言面板</div>
              </div>

              <div class="icon-box-item">
                <el-button
                  @click.native="fontFamily()"
                  size="mini"
                  icon=" iconfont icon-font"
                  circle
                />
                <div  class="icon-text">改变字体</div>
              </div>

              <div class="icon-box-item">
                <el-button
                  @click.native="updateBackground()"
                  size="mini"
                  icon=" iconfont icon-moon-o"
                  circle
                />
                <div  class="icon-text">夜间模式</div>
              </div>

              <div class="icon-box-item">
                <el-button
                  @click.native="setFullscreen()"
                  size="mini"
                  icon=" iconfont icon-Expand"
                  circle
                />
                <div  class="icon-text">全屏模式</div>
              </div>
            </el-row>
            <el-row>
              <el-col class="recommend-text" :span="18" :offset="3">{{userinfo.userinfo}}</el-col>
            </el-row>
          </el-row>
        </el-col>

        <el-col class="middle-box">
          <el-row class="item-box">
            <el-row class="item" v-for="(item, index) in messageArr" :key="index">
              <el-col :span="2" :offset="2"
                ><img src="../assets/profile.png" alt=""
              /></el-col>
              <el-col :span="18" :offset="1" class="comment">
                <span>{{ item.name }}</span>
                <span>{{ item.content }}</span>
              </el-col>
            </el-row>
          </el-row>

          <el-row class="btn-box">
            <el-col :span="6" :offset="5">
              <el-button
                @click.native="$router.push('/message')"
                icon="el-icon-chat-line-square"
                size="mini"
                >查看更多</el-button
              >
            </el-col>
            <el-col :span="6" :offset="2">
              <el-button
                @click.native="$router.push('/message')"
                icon="el-icon-edit-outline"
                size="mini"
                >写新留言</el-button
              >
            </el-col>
          </el-row>
        </el-col>

        <el-col>
          <el-row class="footer-box">
            <el-col class="copyright logo">
              <p>© XiaoYe Blog 2021.3.11 - 未完...</p>
              <p>
                <a target="_blank" href="https://beian.miit.gov.cn"
                  >备案/许可证编号为：粤ICP备2021124495号</a
                >
              </p>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </template>
  </el-skeleton>
</template>

<script>
import { ElMessage } from "element-plus";
import { defineComponent, ref, onMounted } from "vue";
import { getPageRep, getUserInfo } from "../api/index";
export default defineComponent({
  name: "HomeLeft",
  props: {
    bgColor: String,
  },
  setup(props, { emit }) {
    let loading = ref(true)
    // 博客主人信息
    const userinfo = ref(null);

    // 网页总高度
    let clientHeight = 0;
    // 中间值
    let middleHeight = 0;
    // 计算中间不偏移的高度总数
    let noOffsetHeight = 0;
    // 当前鼠标在网页中的位置
    let clientY = 0;
    // 标记是向上滚动还是向下,默认0是向下,1是向上，2是不动
    let isDown = 0;
    // 定时器标识
    let timeFlag = null;
    let leftNode;
    // 网页宽度改变，重新计算
    function resizeFu() {
      // 网页总高度
      clientHeight = document.documentElement.clientHeight;
      // 中间值
      middleHeight = clientHeight / 2;
      // 计算中间不偏移的高度总数:为总高度的百分之四
      noOffsetHeight = Math.floor(((clientHeight / 100) * 4) / 2);
      offsetFn();
    }
    // 控制左侧鼠标移上移下的偏移效果
    function offsetFn() {
      if (clientY < middleHeight - noOffsetHeight) {
        // 没滚动到底部
        isDown = 1;
        if (leftNode.scrollTop >= 0) leftNode.scrollTop -= 2;
      } else if (clientY > middleHeight + noOffsetHeight) {
        isDown = 0;
        // 没滚动到底部
        if (
          leftNode.scrollTop + leftNode.clientHeight <
          leftNode.scrollHeight
        ) {
          leftNode.scrollTop += 2;
        }
      } else {
      }
    }
    window.addEventListener("resize", resizeFu);
    window.onload = function () {
      resizeFu();
    };
    onMounted(() => {
      leftNode = document.querySelector("#aside");
      //监听鼠标移动
      leftNode.addEventListener("mousemove", (ev) => {
        clientY = ev.clientY;
        offsetFn();
      });
      // 监听鼠标移出事件
      leftNode.addEventListener("mouseleave", () => {
        isDown = 2;
      });
      // 禁掉鼠标滚轮控制滚动条
      leftNode.addEventListener("mousewheel", (ev) => {
        ev.preventDefault();
      });

      // 如果停留在上面鼠标没动，则让滚动条自动滚动
      timeFlag = setInterval(() => {
        // 向下滚动,  0 体位是在下面的，所以isDown是向下滚动
        if (isDown === 0) {
          leftNode.scrollTop += 2;
        } else if (isDown === 1) {
          leftNode.scrollTop -= 2;
        }
      }, 80);
    });

    const messageArr = ref([]);

    //更改字体
    function fontFamily() {
      let body = document.getElementsByTagName("body")[0];
      body.style.fontFamily === "fangsong"
        ? (body.style.fontFamily = "微软雅黑")
        : (body.style.fontFamily = "fangsong");
    }

    //跳转夜间/白天模式
    let changeBGColor = ref("night");
    function updateBackground() {
      emit("changeBackground", changeBGColor.value);
      changeBGColor.value === "morning"
        ? (changeBGColor.value = "night")
        : (changeBGColor.value = "morning");
    }
    //控制显示全屏
    function setFullscreen(element) {
      var el =
        element instanceof HTMLElement ? element : document.documentElement;
      //判断是否支持全屏
      var rfs =
        el.requestFullscreen ||
        el.webkitRequestFullscreen ||
        el.mozRequestFullScreen ||
        el.msRequestFullscreen;
      if (rfs) {
        rfs.call(el);
      } else if (window.ActiveXObject) {
        var ws = new ActiveXObject("WScript.Shell");
        ws && ws.SendKeys("{F11}");
      }
    }

    //获取留言内容,默认左侧只展示最新五条
    getPageMessage(1);
    async function getPageMessage(page) {
      let { code, message, data } = await getPageRep(page);
      if (code === 200 && message === "成功") {
        loading.value = false
        messageArr.value = data.result;
        return;
      }
      ElMessage.error(message);
    }
    // 获取博客用户信息
    getBlogUserInfo();
    async function getBlogUserInfo() {
      let { code, message, data } = await getUserInfo();
      if (code === 200 && message === "成功") {
        loading.value = false
        userinfo.value = data;
        return;
      }
      ElMessage.error(message);
    }
    return {
      loading,
      userinfo,
      fontFamily,
      setFullscreen,
      updateBackground,
      messageArr,
      changeBGColor,
    };
  },
});
</script>

<style lang="less" scoped>
body {
  .el-popper,
  .is-light {
    background: none !important;
    border: none !important;
  }
}
.main {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  transition: all 3s;
  .top-box {
    .top {
      display: flex;
      flex-flow: column;
      margin: 0 auto;
      text-align: center;
      .img-box {
        margin: 65px 0px 10px 0px;
        img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
      }

      .recommend-text {
        text-align: left;
        font-size: 14px;
        line-height: 1.5;
      }
      .icon-box {
        display: flex;
        justify-content: center;
        margin: 20px 0px;
        .el-button {
          color: rgba(255, 255, 255, 0.8);
          border-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.45)
            rgba(255, 255, 255, 0.55);
          background: rgb(0 0 0 / 20%);
          border: none;
        }
        .icon-box-item{
          position: relative;
          margin: 0 .5vw;
          .icon-text{
            display: none;
            position: absolute;
            margin-top: 15px;
            padding: 5px 20px;
            left: -120%;
            color: #fff;
            background-color: #303133;
            border-radius: 5px;
            width: 60px;
            z-index: 10;
            &:after {
              content: "";
              position: absolute;
              top: -26px;
              right: 23px;
              margin: 20px;
              border-right: 1px solid #303133;
              border-bottom: 1px solid #303133;
              width: 10px;
              height: 10px;
              transform: rotate(
          -45deg);
              -o-transform: rotate(-45deg);
              -webkit-transform: rotate(
          225deg);
              -moz-transform: rotate(-45deg);
              -ms-transform: rotate(-45deg);
              background-color: #303133;
            }
            
          }
          &:hover{
            .icon-text{
              display: block;
            }
          }
        }
      }
      .title-text {
        font-size: 16px;
      }
    }
  }

  .middle-box {
    width: 100%;
    margin-top: 35px;
    .item-box {
      .item {
        width: 100%;
        margin: 15px 0px;
        img {
          width: 100%;
          border-radius: 50%;
        }
        .comment {
          display: flex;
          flex-direction: column;
          span {
            overflow: hidden;
            text-overflow: ellipsis;
            // display: -webkit-box;
            // -webkit-line-clamp: 2;
            // -webkit-box-orient: vertical;
          }
        }
      }
    }
    .btn-box {
      margin-top: 10px;
      width: 100%;
    }
  }
  .footer-box {
    .logo {
      margin-top: 60px;
      padding: 20px 0px;
      background-color: rgba(0, 0, 0, 0.5);
      img {
        margin: 0 auto;
        display: inherit;
        width: 150px;
        height: 30px;
      }
      p {
        color: white;
        a {
          color: white;
          text-decoration: none;
        }
      }
    }
    .footer-img {
      position: relative;
      width: 70px;
      height: 50px;
      img {
        width: 100%;
        height: 100%;
      }
      .background {
        position: absolute;
        top: 0;
        opacity: 0;
        font-size: 12px;
        text-align: center;
        width: 100%;
        line-height: 50px;
        height: 50px;
        background: rgba(157, 158, 157, 0.672);
      }
    }
    .footer-img:hover .background {
      opacity: 1;
    }

    .copyright {
      font-size: 12px;
      text-align: center;
    }
  }
}

.el-space{
  width: 100%;
  .el-space__item{
    width: 100%;
  }
}
</style>